<template>
    <QilinTable v-model:tableConfig="tableConfig" @changeCurrentPage="changeCurrentPage"
        @changeCurrentSize="changeCurrentSize" @sortChangeData="sortChange" ref="tableConfigRef"
        @selectionChangeData="selectionChangeData"
    >
        <template v-slot:project="slotData">
            <span>{{slotData.data.scope.row.project.join("、")}}</span>
        </template>
        <template v-slot:elTableColumn="slotData">
            <el-table-column :label="slotData.data.item.label" :prop="slotData.data.item.prop" 
                :align="slotData.data.item.align" :width="slotData.data.item.width">
                <span>EDGQilin</span>
            </el-table-column>
        </template>
        <template v-slot:elTableHeader="slotData">
            <div style="display:flex;align-items:center;">
                <el-tooltip effect="dark" placement="top" content="这是一个自定义表头">
                    <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
                <span style="display:inline-block;margin-left:3px;">{{slotData.data.item.label}}</span>
            </div>
        </template>
    </QilinTable>
    <el-button @click="sort">取消排序</el-button>
    <el-button @click="clearSelection">取消全选</el-button>
    <el-button @click="toggleAllSelection">切换全选全不选</el-button>
    <el-button @click="toggleRowSelection">设置某个选中</el-button>
    <QilinTable v-model:tableConfig="tableConfig1" style="margin-top:20px;"></QilinTable>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
const tableConfigRef = ref(null);
const sort=()=>{
    tableConfigRef.value.sort("birthday",null);
};
const clearSelection=()=>{
    tableConfigRef.value.clearSelection();
};
const toggleAllSelection=()=>{
    tableConfigRef.value.toggleAllSelection();
};
const toggleRowSelection=()=>{
    tableConfigRef.value.toggleRowSelection(tableConfig.tableData[1],true);
};
const selectionChangeData=(selection)=>{
    console.log(selection);
};


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 切换页码事件监听
const changeCurrentPage=(page)=>{
    console.log(page);
    tableConfig.paginationsObj.currentPage=page;
};
// 切换页码事件监听
const changeCurrentSize=(size)=>{
    console.log(size);
    tableConfig.paginationsObj.pageSize=size;
};
// 排序事件监听
const sortChange=(data)=>{
    console.log(data);
};

const tableConfig=reactive({
    elTableConfig:{
        border:true,
        stripe:true,
        defaultExpandAll:true,
        rowKey:"salary",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            if(rowIndex === 3 && columnIndex === 2){
                return {
                    "font-weight":"bolder"
                }
            }
        }
    },
    headerConfig:[
        {
            type:"checkbox",
            width:60
        },
        {
            label:"序号",
            type:"sortIndex",
            width:60
        },
        {
            label:"姓名",
            prop:"name",
            type:"text",
            headerSlot:true,
            width:80
        },
        {
            label:"出生日期",
            prop:"birthday",
            type:"date",
            format:"chinese",
            sortable:"custom",
            width:150
        },
        {
            label:"项目",
            prop:"project",
            type:"slot",
            slotName:"project",
            ellipsis:true,
            // tooltipOptions:{
            //     content:"这是我的项目",
            //     placement:"top"
            // },
            width:200
        },
        {
            label:"公司",
            type:"multiple",
            children:[
                {
                    label:"名称",
                    prop:"companyName",
                    type:"text",
                    ellipsis:true,
                    width:160
                },
                {
                    label:"年限",
                    prop:"time",
                    type:"text",
                    width:100
                },
                {
                    label:"职务",
                    prop:"position",
                    type:"text",
                    width:100
                },
                {
                    label:"薪资",
                    prop:"salary",
                    type:"text",
                    width:100
                }
            ]
        },
        {
            label:"昵称",
            prop:"nickName",
            type:"customOperate",
            align:"center",
            width:100
        },
        {
            label:"操作",
            type:"operate",
            fixed:"right",
            hideSeparate:true,
            width:280,
            operateOptions:[
                {
                    btnName:"抽屉",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                        drawerConfig.isShow=true;
                    }
                },
                {
                    btnName:"删除",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                }
            ],
            moreOperateOptions:[
                {
                    btnName:"编辑",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                },
                {
                    btnName:"删除",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                }
            ]
        }
    ],
    tableData:[
        {
            name:"Qilin",
            birthday:"1996-05-12",
            project:["戒毒所","看守所","拘留所","安康医院"],
            companyName:"南京冠霆智能科技有限公司",
            time:"8个月",
            position:"前端开发",
            salary:7000
        },
        {
            name:"Qilin",
            birthday:"1996-05-12",
            project:["SDP零信任项目","动态应用安全防护系统BSG"],
            companyName:"亚信智网有限公司",
            time:"13个月",
            position:"前端开发",
            salary:9500
        },
        {
            name:"Qilin",
            birthday:"1996-05-12",
            project:["云上贵州项目","红花街道h5项目","温州市党政机关信息化项目"],
            companyName:"苏软科技（南京）有限公司",
            time:"11个月",
            position:"前端开发",
            salary:13000
        },
        {
            name:"Qilin",
            birthday:"1996-05-12",
            project:["U创办公管理系统","U创小程序"],
            companyName:"南京联创智慧科技有限公司",
            time:"22个月",
            position:"前端开发",
            salary:15000,
            children:[
                {
                    name:"Qilin",
                    birthday:"1996-05-12",
                    project:["U创办公管理系统","U创小程序"],
                    companyName:"南京联创智慧科技有限公司",
                    time:"22个月",
                    position:"前端开发",
                    salary:16000,
                }
            ]
        }
    ],
    paginationsObj:{
        currentPage:1, //当前页
        pageSize:10, //当前每页数量
        pageSizes:[10,20,30], //每页显示多少条选项集
        total:0, //表格总数量
        layout:"total,sizes,prev,pager,next,jumper"
    }
});
const tableConfig1 = reactive({
    elTableConfig:{
        border:true,
        stripe:true
    },
    headerConfig:[
        {
            label:"出生日期",
            prop:"birthday",
            type:"date",
            format:"chinese"
        }
    ],
    tableData:[],
    paginationsObj: {
        isHide: false, //是否隐藏分页器
        currentPage: 1, //当前页
        pageSize: 10, //当前每页数量
        pageSizes: [10, 20, 30], //每页显示多少条选项集
        total: 0, //表格总数量
        layout: "total,sizes,prev,pager,next,jumper"
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>

</style>
